<template>
	<n-layout native-scrollbar class='layout' v-if='isReady'>
		<n-layout-header class='index-header'>
			<Suspense>
				<template v-slot>
					<TopHeader/>
				</template>
				<template v-slot:fallback>
					<Loading/>
				</template>
			</Suspense>
		</n-layout-header>
		<n-layout has-sider native-scrollbar class='index-content'>
			<n-layout-sider class='sider' width='auto'>
				<Suspense>
					<template v-slot>
						<LeftMenus ref='leftMenusRef'/>
					</template>
					<template v-slot:fallback>
						<Loading/>
					</template>
				</Suspense>
			</n-layout-sider>
			<n-layout-content class='index-main'>
				<Suspense>
					<template v-slot>
						<RightContainer ref='rightContainerRef' :showOption='showOption'/>
					</template>
					<template v-slot:fallback>
						<Loading/>
					</template>
				</Suspense>
			</n-layout-content>
		</n-layout>
	</n-layout>
</template>
<script lang='ts' setup>
import { defineAsyncComponent, onBeforeMount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import 'font-awesome/css/font-awesome.min.css';
import bowser from 'bowser';
/*VxeTable*/
// import VXETable from '@/config/vxe-table/index.ts';
import { VxeUI } from '@/config/vxe/index.ts';
import axios from '@/config/axios/index.ts';
/*naive-ui*/
import { loginPath } from '@/config/config.ts';
const TopHeader = defineAsyncComponent(() => import('@/components/index/top/TopHeader/index.vue'));
const LeftMenus = defineAsyncComponent(() => import('@/components/index/left/LeftMenus.vue'));
const RightContainer = defineAsyncComponent(() => import('@/components/index/right/RightContainer.vue'));
const Loading = defineAsyncComponent(() => import('@/components/customComponents/loading/Loading11.vue'));
const router = useRouter();
const leftMenusRef = ref();
let isReady = ref(false);
onBeforeMount(() => {
	// window['$message'] = useMessage();
	// 在节点挂载之前进行判断,更快速
	if (!sessionStorage.getItem('x-auth-token')) {
		// 如果没有x-auth-token代表着没登录,直接跳回登录页
		VxeUI.modal.message({ content : '请先登录!', status : 'warning', id : 'failedMessage' });
		router.replace({
			path : loginPath
		});
	}
	let preConfig;
	axios<any, any, any>({
		baseURL : '',
		url     : 'config/config.json',
		method  : 'get'
	}).then((jsonResult: any) => {
		const location = window.location.origin;
		console.log('获取到的配置信息:', jsonResult);
		preConfig = jsonResult[location];
		console.log('获取到的配置:', preConfig);
	});
});
onMounted(() => {
	const userAgent = bowser.getParser(navigator.userAgent);
	const browser = userAgent.parseBrowser();
	// 浏览器信息不存在,提示用户
	if (!browser) {
		console.log(browser);
		VxeUI.modal.confirm({
			content : `您的浏览器信息为\n${navigator.userAgent}\n必须使用Google Chrome-90以上的版本`,
			title   : '浏览器检测',
			id      : 'checkBrowserModalUnique'
		}).then((type: unknown) => {
			VxeUI.modal.message({
				content : '不使用指定浏览器将无法使用系统!',
				status  : 'warning',
				id      : 'failedMessage'
			});
		});
		return;
	}
	const isMobile = 'desktop' !== userAgent.getPlatformType();
	const isChromiumCore = 'Chrome' === browser.name;
	let ChromiumVersion = -1;
	if (Object.prototype.hasOwnProperty.call(browser, 'version')) {
		if (browser.version) {
			ChromiumVersion = parseFloat(browser.version);
		}
	}
	// 不支持手机登录
	if (isMobile) {
		VxeUI.modal.confirm({
			content : `请使用桌面浏览器登录!`,
			title   : '浏览器检测',
			id      : 'checkBrowserModalUnique'
		}).then((type: unknown) => {
			VxeUI.modal.message({
				content : '不使用桌面浏览器将无法使用系统!',
				status  : 'warning',
				id      : 'mobileBrowserIsNotUseMessage'
			});
		});
		return;
	}
	console.log('用户端信息:', userAgent);
	console.log('谷歌浏览器信息:', browser);
	if (isChromiumCore && 90 <= ChromiumVersion) {
		// 通过浏览器检测
		isReady.value = true;
		return;
	} else {
		VxeUI.modal.confirm({
			content : `您的浏览器为\n${browser.name} ${browser.version}\n必须使用Google Chrome-90以上的版本`,
			title   : '浏览器检测',
			id      : 'checkBrowserModalUnique'
		}).then((type: unknown) => {
			VxeUI.modal.message({
				content : '不使用指定浏览器将无法使用系统!',
				status  : 'warning',
				id      : 'checkChromeBrowserMessage'
			});
		});
		return;
	}
});
const showOption = (menuCode: string) => {
	if (menuCode) {
		leftMenusRef.value.menusRef.showOption(menuCode);
	} else {
		leftMenusRef.value.menusRef.showOption();
	}
};
</script>
<style lang='scss' scoped>
.layout{
	box-sizing :border-box;
	margin     :0;
	padding    :0;
	border     :0;
	height     :100%;
	width      :100%;
	overflow   :hidden;
	.index-header{
		box-sizing :border-box;
		margin     :0;
		padding    :0;
		border     :0;
		height     :45px;
		width      :100%;
	}
	.index-content{
		box-sizing :border-box;
		margin     :0;
		padding    :0;
		border     :0;
		height     :calc(100% - 45px);
		width      :100%;
		.sider{
			box-sizing :border-box;
			height     :100%;
			width      :auto;
			font-size  :16px;
			overflow-x :hidden;
			overflow-y :auto;
		}
		.index-main{
			box-sizing :border-box;
			margin     :0;
			padding    :0;
			border     :0;
			height     :100%;
			width      :100%;
		}
	}
}
</style>